{% extends 'core/base.html' %}
{% load static %}

{% block title %}实时监控仪表板 - 社区管理系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <h2 class="mb-4">
                <i class="fas fa-video text-primary"></i>
                实时监控仪表板
            </h2>
        </div>
    </div>

    <!-- 监控点状态 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-map-marker-alt text-info"></i>
                        监控点状态
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for point in monitoring_points %}
                        <div class="col-md-4 col-lg-3 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <i class="fas fa-video fa-2x mb-2"></i>
                                    <h6 class="card-title">{{ point.name }}</h6>
                                    <p class="card-text text-muted small">{{ point.location }}</p>
                                    <span class="badge badge-{{ point.status == 'online' and 'success' or 'danger' }}">
                                        {{ point.status == 'online' and '在线' or '离线' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 监控画面区域 -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-play-circle text-success"></i>
                        监控画面
                    </h5>
                </div>
                <div class="card-body">
                    <div class="text-center py-5">
                        <i class="fas fa-video-slash fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">暂无信号</h5>
                        <p class="text-muted">请选择监控点查看画面</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 实时信息 -->
        <div class="col-lg-4">
            <!-- 最新异常记录 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-exclamation-triangle text-warning"></i>
                        最新异常记录
                    </h6>
                </div>
                <div class="card-body">
                    {% for abnormal in recent_abnormal %}
                    <div class="d-flex mb-2">
                        <div class="flex-shrink-0">
                            <small class="text-muted">{{ abnormal.created_at|date:"H:i" }}</small>
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <strong>{{ abnormal.abnormal_type }}</strong>
                            <p class="mb-0 small">{{ abnormal.reason|truncatechars:50 }}</p>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-muted small">暂无异常记录</p>
                    {% endfor %}
                </div>
            </div>

            <!-- 最新举报信息 -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-flag text-danger"></i>
                        最新举报信息
                    </h6>
                </div>
                <div class="card-body">
                    {% for report in recent_reports %}
                    <div class="d-flex mb-2">
                        <div class="flex-shrink-0">
                            <small class="text-muted">{{ report.created_at|date:"H:i" }}</small>
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <strong>{{ report.report_type }}</strong>
                            <p class="mb-0 small">{{ report.reason|truncatechars:50 }}</p>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-muted small">暂无举报信息</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
